<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>day07-享+本地生活 | 92-YYDS</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/rz_doc_92/favicon.ico">
    <link rel="apple-touch-icon" href="/rz_doc_92/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/rz_doc_92/assets/css/0.styles.eb696f23.css" as="style"><link rel="preload" href="/rz_doc_92/assets/js/app.c37b6607.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/3.fe9c6282.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/42.31ef2deb.js" as="script"><link rel="prefetch" href="/rz_doc_92/assets/js/10.a815e7f8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/11.5cf73907.js"><link rel="prefetch" href="/rz_doc_92/assets/js/12.8364f023.js"><link rel="prefetch" href="/rz_doc_92/assets/js/13.189305ad.js"><link rel="prefetch" href="/rz_doc_92/assets/js/14.28e18334.js"><link rel="prefetch" href="/rz_doc_92/assets/js/15.bc379ff7.js"><link rel="prefetch" href="/rz_doc_92/assets/js/16.63adadba.js"><link rel="prefetch" href="/rz_doc_92/assets/js/17.28e8fcdb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/18.917dcdd1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/19.e231595a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/2.c35adb5c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/20.d1e0017d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/21.4f9461ca.js"><link rel="prefetch" href="/rz_doc_92/assets/js/22.8bd2376c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/23.535f0a8f.js"><link rel="prefetch" href="/rz_doc_92/assets/js/24.c596c341.js"><link rel="prefetch" href="/rz_doc_92/assets/js/25.b3cb2221.js"><link rel="prefetch" href="/rz_doc_92/assets/js/26.fac4fec9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/27.77d2df1d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/28.51cbe5c1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/29.0193e27d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/30.b6174252.js"><link rel="prefetch" href="/rz_doc_92/assets/js/31.985027ac.js"><link rel="prefetch" href="/rz_doc_92/assets/js/32.3dd61489.js"><link rel="prefetch" href="/rz_doc_92/assets/js/33.45abb40d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/34.91103b73.js"><link rel="prefetch" href="/rz_doc_92/assets/js/35.2a882fa8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/36.3b80d6cf.js"><link rel="prefetch" href="/rz_doc_92/assets/js/37.11f329d1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/38.974df1fd.js"><link rel="prefetch" href="/rz_doc_92/assets/js/39.7cc0e285.js"><link rel="prefetch" href="/rz_doc_92/assets/js/4.219d9d15.js"><link rel="prefetch" href="/rz_doc_92/assets/js/40.a928365a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/41.6be66339.js"><link rel="prefetch" href="/rz_doc_92/assets/js/43.9b423721.js"><link rel="prefetch" href="/rz_doc_92/assets/js/44.f020f7e9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/45.79487c7e.js"><link rel="prefetch" href="/rz_doc_92/assets/js/5.b9d7eb6d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/6.af284094.js"><link rel="prefetch" href="/rz_doc_92/assets/js/7.2449c640.js"><link rel="prefetch" href="/rz_doc_92/assets/js/8.e6bfdace.js"><link rel="prefetch" href="/rz_doc_92/assets/js/9.4f10b15a.js">
    <link rel="stylesheet" href="/rz_doc_92/assets/css/0.styles.eb696f23.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/rz_doc_92/" class="home-link router-link-active"><img src="/rz_doc_92/doraameng.jpg" alt="92-YYDS" class="logo"> <span class="site-name can-hide">92-YYDS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/01" class="sidebar-heading clickable"><span>1-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/02" class="sidebar-heading clickable"><span>2-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/03" class="sidebar-heading clickable"><span>3-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/04" class="sidebar-heading clickable"><span>4-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/05" class="sidebar-heading clickable"><span>5-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/06" class="sidebar-heading clickable"><span>6-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/07" class="sidebar-heading clickable open active"><span>7-享+本地生活</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/rz_doc_92/xcx/07.html" aria-current="page" class="active sidebar-link">day07-享+本地生活</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_01-报修列表-获取报修列表" class="sidebar-link">01.报修列表—获取报修列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#status状态" class="sidebar-link">status状态</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_02-报修详情-获取报修详情" class="sidebar-link">02.报修详情—获取报修详情</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-2" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-2" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-2" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_03-报修详情-取消报修" class="sidebar-link">03.报修详情—取消报修</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-3" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-3" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-3" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_04-报修详情-修改报修信息" class="sidebar-link">04.报修详情—修改报修信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-4" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-4" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-4" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_05-地图组件-显示标记" class="sidebar-link">05.地图组件—显示标记</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-5" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#map" class="sidebar-link">map</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-5" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_06-地图组件-显示路径-课后了解即可" class="sidebar-link">06.地图组件—显示路径 ---------  课后了解即可</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-6" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-5" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-6" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_07-访客邀请-介绍" class="sidebar-link">07.访客邀请—介绍</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_08-访客邀请-表单信息收集-定义数据字段" class="sidebar-link">08.访客邀请—表单信息收集----定义数据字段</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-7" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-6" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-7" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_09-访客邀请-表单信息收集-获取房屋列表" class="sidebar-link">09.访客邀请—表单信息收集--获取房屋列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-8" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-7" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-8" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_10-访客邀请-校验表单信息" class="sidebar-link">10.访客邀请—校验表单信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-9" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-9" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_11-访客邀请-提交表单" class="sidebar-link">11.访客邀请—提交表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-10" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-8" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-10" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_12-访客列表-获取访客列表" class="sidebar-link">12.访客列表—获取访客列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-11" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#status" class="sidebar-link">status</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-9" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-11" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_13-通行证-获取通行详情" class="sidebar-link">13.通行证—获取通行详情</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-12" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-10" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-12" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_14-通行证-自定义分享" class="sidebar-link">14.通行证—自定义分享</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-13" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#onshareappmessage" class="sidebar-link">onShareAppMessage</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-13" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_15-通行证-保存到本地api介绍" class="sidebar-link">15.通行证—保存到本地api介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-14" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#saveimagetophotosalbum" class="sidebar-link">saveImageToPhotosAlbum</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#getimageinfo" class="sidebar-link">getImageInfo</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#downloadfile" class="sidebar-link">downloadFile</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#_16-通行证-保存到本地实现" class="sidebar-link">16.通行证—保存到本地实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#目标-15" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#核心步骤-11" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/xcx/07.html#参考代码-14" class="sidebar-link">参考代码</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/08" class="sidebar-heading clickable"><span>8-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/09" class="sidebar-heading clickable"><span>9-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/xcx/10" class="sidebar-heading clickable"><span>10-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="day07-享-本地生活"><a href="#day07-享-本地生活" class="header-anchor">#</a> day07-享+本地生活</h1> <h2 id="_01-报修列表-获取报修列表"><a href="#_01-报修列表-获取报修列表" class="header-anchor">#</a> 01.报修列表—获取报修列表</h2> <h3 id="目标"><a href="#目标" class="header-anchor">#</a> 目标</h3> <p>能独立完成报修列表功能</p> <h3 id="核心步骤"><a href="#核心步骤" class="header-anchor">#</a> 核心步骤</h3> <ol><li>onLoad钩子里发请求获取数据</li> <li>套用数据完成渲染</li></ol> <h3 id="status状态"><a href="#status状态" class="header-anchor">#</a> status状态</h3> <ul><li>值为 1 表示受理中，对应的样式类名 info</li> <li>值为 2 表示上门中，对应的样式类名 success</li> <li>值为 3 表示已完成，对应的样式类名 complete</li> <li>值为 0 表示已取消，对应的样式类名 cancel</li></ul> <h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// wxml</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>cell<span class="token operator">-</span>group wx<span class="token operator">:</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;{{repairList}}&quot;</span> 
	<span class="token literal-property property">wx</span><span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;id&quot;</span> border<span class="token operator">=</span><span class="token string">&quot;{{false}}&quot;</span> 
	<span class="token literal-property property">mark</span><span class="token operator">:</span>id<span class="token operator">=</span><span class="token string">&quot;{{item.id}}&quot;</span> 
	<span class="token literal-property property">bind</span><span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;goDetail&quot;</span><span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>van<span class="token operator">-</span>cell size<span class="token operator">=</span><span class="token string">&quot;large&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;{{item.houseInfo}}&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tag info&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{item.status === 1}}&quot;</span><span class="token operator">&gt;</span>受理中<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tag success&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{item.status === 2}}&quot;</span><span class="token operator">&gt;</span>上门中<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tag complete&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{item.status === 3}}&quot;</span><span class="token operator">&gt;</span>已完成<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tag cancel&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{item.status === 0}}&quot;</span><span class="token operator">&gt;</span>已取消<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>cell<span class="token operator">&gt;</span>
    
<span class="token comment">// js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRepairList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getRepairList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/repair'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">repairList</span><span class="token operator">:</span> data<span class="token punctuation">.</span>rows<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_02-报修详情-获取报修详情"><a href="#_02-报修详情-获取报修详情" class="header-anchor">#</a> 02.报修详情—获取报修详情</h2> <h3 id="目标-2"><a href="#目标-2" class="header-anchor">#</a> 目标</h3> <p>能独立完成报修详情功能</p> <h3 id="核心步骤-2"><a href="#核心步骤-2" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给列表项绑定事件，点击跳转详情页并传递维修id参数</li> <li>在详情页中获取id，并发送请求获取维修详情</li> <li>套用数据完成渲染</li></ol> <h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 上一个列表页的 编程式导航</span>
<span class="token function">goDetail</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/repair_pkg/pages/detail/index?id='</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>id
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token comment">// </span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">latitude</span><span class="token operator">:</span> <span class="token number">40.060539</span><span class="token punctuation">,</span>
    <span class="token literal-property property">longitude</span><span class="token operator">:</span> <span class="token number">116.343847</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRepairDetail</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getRepairDetail</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/repair/'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">enhanced</span> <span class="token attr-name">show-scrollbar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>repair-detail<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>polyline<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 2}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 地图组件，只有处于上门中状态才显示 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>map</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">scale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">latitude</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{latitude}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">longitude</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{longitude}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>map</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房屋信息<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{houseInfo}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag info<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 1}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>受理中<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag success<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 2}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>上门中<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag complete<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 3}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>已完成<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag cancel<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 0}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>已取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>报修信息<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>维修项目<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{repairItemName}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>手机号码<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{mobile}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>预约日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{appointment}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>问题描述<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{description}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>attachment<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>问题附件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-x</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{attachment}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.url}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toolbar<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 1}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-text active<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>修改信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>取消报修<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_03-报修详情-取消报修"><a href="#_03-报修详情-取消报修" class="header-anchor">#</a> 03.报修详情—取消报修</h2> <h3 id="目标-3"><a href="#目标-3" class="header-anchor">#</a> 目标</h3> <p>能独立完成取消报修功能</p> <h3 id="核心步骤-3"><a href="#核心步骤-3" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给取消按钮绑定事件，点击显示确认取消弹框</li> <li>给弹框绑定事件，当点击确认按钮时发送请求取消报修</li> <li>接口成功后返回到维修列表页</li></ol> <h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>openDialog<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>取消报修<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-dialog</span>
  <span class="token attr-name">message</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>是否要取消本次报修？<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">showCancelButton</span>
  <span class="token attr-name">show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{dialogVisible}}<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">cancel-button-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#848484<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">confirm-button-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#5591af<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name"><span class="token namespace">bind:</span>close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dialogClose<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">dialogVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">latitude</span><span class="token operator">:</span> <span class="token number">40.060539</span><span class="token punctuation">,</span>
    <span class="token literal-property property">longitude</span><span class="token operator">:</span> <span class="token number">116.343847</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">openDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">dialogVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">dialogClose</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(ev)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail <span class="token operator">===</span> <span class="token string">'confirm'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">'/cancel/repaire/'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      wx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_04-报修详情-修改报修信息"><a href="#_04-报修详情-修改报修信息" class="header-anchor">#</a> 04.报修详情—修改报修信息</h2> <h3 id="目标-4"><a href="#目标-4" class="header-anchor">#</a> 目标</h3> <p>能独立完成修改报修信息功能</p> <h3 id="核心步骤-4"><a href="#核心步骤-4" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给修改按钮绑定事件，跳转报修表单页（及添加报修页）并携带报修id参数。</li> <li>通过id查询之前填写的表单信息并完成数据绑定</li> <li>提交表单完成更改（记得提交id参数）</li></ol> <h3 id="参考代码-4"><a href="#参考代码-4" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">editRepair</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/repair_pkg/pages/form/index?id='</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 重新回到之前添加报修的页面， 只不过编辑的时候有个id 属性</span>
<span class="token comment">// /repair_pkg/pages/form/index</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
   <span class="token comment">// ......省略</span>
  <span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRepairItems</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      wx<span class="token punctuation">.</span><span class="token function">setNavigationBarTitle</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'修改报修信息'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> repairDetail <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/repair/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token operator">...</span>repairDetail<span class="token punctuation">,</span>
        <span class="token literal-property property">selectedHouse</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> repairDetail<span class="token punctuation">.</span>houseId<span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> repairDetail<span class="token punctuation">.</span>houseInfo <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">selectedRepairItem</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> repairDetail<span class="token punctuation">.</span>repairItemId<span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> repairDetail<span class="token punctuation">.</span>repairItemName <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>
      <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyHouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
      <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyRepairItem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
      <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
      <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span>
      <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyDescription</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
      <span class="token keyword">return</span>
    <span class="token keyword">const</span> houseId <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>selectedHouse<span class="token punctuation">.</span>id
    <span class="token keyword">const</span> repairItemId <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>selectedRepairItem<span class="token punctuation">.</span>id
    <span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> mobile<span class="token punctuation">,</span> appointment<span class="token punctuation">,</span> description<span class="token punctuation">,</span> attachment <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/repair'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      id<span class="token punctuation">,</span>
      houseId<span class="token punctuation">,</span>
      repairItemId<span class="token punctuation">,</span>
      mobile<span class="token punctuation">,</span>
      appointment<span class="token punctuation">,</span>
      description<span class="token punctuation">,</span>
      attachment<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/repair_pkg/pages/list/index'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_05-地图组件-显示标记"><a href="#_05-地图组件-显示标记" class="header-anchor">#</a> 05.地图组件—显示标记</h2> <h3 id="目标-5"><a href="#目标-5" class="header-anchor">#</a> 目标</h3> <p>掌握地图组件map标记的基础使用</p> <h3 id="map"><a href="#map" class="header-anchor">#</a> map</h3> <p>map组件提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。<a href="https://developers.weixin.qq.com/miniprogram/dev/component/map.html" target="_blank" rel="noopener noreferrer">文档地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br><strong>常用属性</strong></p> <ul><li>latitude 地图中心的纬度</li> <li>longitude 地图中心的经度</li> <li>scale 地图初始的缩放比例</li> <li>markers 地图上的标记</li> <li>polyline 地图路线</li></ul> <h3 id="参考代码-5"><a href="#参考代码-5" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">dialogVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">latitude</span><span class="token operator">:</span> <span class="token number">30.70736</span><span class="token punctuation">,</span>
    <span class="token literal-property property">longitude</span><span class="token operator">:</span> <span class="token number">114.400578</span><span class="token punctuation">,</span>
    <span class="token literal-property property">markers</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
        <span class="token literal-property property">latitude</span><span class="token operator">:</span> <span class="token number">30.70736</span><span class="token punctuation">,</span>
        <span class="token literal-property property">longitude</span><span class="token operator">:</span> <span class="token number">114.400578</span><span class="token punctuation">,</span>
        <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
      	<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">50</span>
      	<span class="token comment">// iconPath: '../../static/uploads/attachment.jpg',</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code>// status === 2  上门中 的状态才能显示 地图
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>polyline<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 2}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>map</span> 
    <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">scale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> 
    <span class="token attr-name">latitude</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{latitude}}<span class="token punctuation">&quot;</span></span> 
    <span class="token attr-name">longitude</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{longitude}}<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">markers</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{markers}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>map</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_06-地图组件-显示路径-课后了解即可"><a href="#_06-地图组件-显示路径-课后了解即可" class="header-anchor">#</a> 06.地图组件—显示路径 ---------  课后了解即可</h2> <h3 id="目标-6"><a href="#目标-6" class="header-anchor">#</a> 目标</h3> <p>能独立完成显示路径功能</p> <h3 id="核心步骤-5"><a href="#核心步骤-5" class="header-anchor">#</a> 核心步骤</h3> <ol><li>通过<a href="">路径规划api</a>获取路径坐标</li> <li>https://developers.weixin.qq.com/miniprogram/dev/component/map.html#polyline</li> <li>解压坐标（即转换坐标）</li> <li>显示路径</li></ol> <h3 id="参考代码-6"><a href="#参考代码-6" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code> <span class="token keyword">async</span> <span class="token function">getPolyline</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> markers <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>markers
    qqMap<span class="token punctuation">.</span><span class="token function">direction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'bicycling'</span><span class="token punctuation">,</span> <span class="token comment">// 可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填'</span>
      <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token punctuation">[</span>markers<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">,</span> markers<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token punctuation">[</span>markers<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>latitude<span class="token punctuation">,</span> markers<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>longitude<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 切记纬度在前，经度在后</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(res)</span>
        <span class="token keyword">let</span> ret <span class="token operator">=</span> res
        <span class="token keyword">let</span> coors <span class="token operator">=</span> ret<span class="token punctuation">.</span>result<span class="token punctuation">.</span>routes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>polyline
        <span class="token keyword">let</span> pl <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token comment">//坐标解压（返回的点串坐标，通过前向差分进行压缩）</span>
        <span class="token keyword">let</span> kr <span class="token operator">=</span> <span class="token number">1000000</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> coors<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          coors<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>coors<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">Number</span><span class="token punctuation">(</span>coors<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> kr
        <span class="token punctuation">}</span>
        <span class="token comment">//将解压后的坐标放入点串数组pl中</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> coors<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          pl<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">latitude</span><span class="token operator">:</span> coors<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">longitude</span><span class="token operator">:</span> coors<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">polyline</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              <span class="token literal-property property">points</span><span class="token operator">:</span> pl<span class="token punctuation">,</span> <span class="token comment">// 路径上的点</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#5591af'</span><span class="token punctuation">,</span> <span class="token comment">// 路径颜色</span>
              <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// 路径宽度</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>polyline<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{status === 2}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>map</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">scale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">latitude</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{latitude}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">longitude</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{longitude}}<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">markers</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{markers}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">polyline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{polyline}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>map</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_07-访客邀请-介绍"><a href="#_07-访客邀请-介绍" class="header-anchor">#</a> 07.访客邀请—介绍</h2> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676964170036-05c362c5-df22-48c8-ae42-7fb5c85d9c40.png#averageHue=%23f8f0e2&amp;clientId=u4c307797-ebd8-4&amp;from=paste&amp;height=278&amp;id=ufacc813a&amp;name=image.png&amp;originHeight=556&amp;originWidth=1224&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=89312&amp;status=done&amp;style=none&amp;taskId=ubf675d0e-c73a-4e09-9fb2-792bcfc894a&amp;title=&amp;width=612" alt="image.png"></p> <h2 id="_08-访客邀请-表单信息收集-定义数据字段"><a href="#_08-访客邀请-表单信息收集-定义数据字段" class="header-anchor">#</a> 08.访客邀请—表单信息收集----定义数据字段</h2> <h3 id="目标-7"><a href="#目标-7" class="header-anchor">#</a> 目标</h3> <p>能独立完成访客邀请表单信息收集功能</p> <h3 id="核心步骤-6"><a href="#核心步骤-6" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给van-action-sheet组件绑定select事件获取房屋信息</li> <li>给van-datetime-picker组价绑定confirm事件获取日期</li> <li>双向绑定获取姓名、性别、手机号</li></ol> <h3 id="参考代码-7"><a href="#参考代码-7" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
    <span class="token literal-property property">houseId</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token literal-property property">houseInfo</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">visitDate</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
    
<span class="token operator">&lt;</span>van<span class="token operator">-</span>datetime<span class="token operator">-</span>picker type<span class="token operator">=</span><span class="token string">&quot;date&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>confirm<span class="token operator">=</span><span class="token string">&quot;selectDate&quot;</span> <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>action<span class="token operator">-</span>sheet  bind<span class="token operator">:</span>select<span class="token operator">=</span><span class="token string">&quot;selectHouse&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">selectHouse</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> name <span class="token punctuation">}</span> <span class="token operator">=</span> ev<span class="token punctuation">.</span>detail
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">houseId</span><span class="token operator">:</span> id<span class="token punctuation">,</span>
      <span class="token literal-property property">houseInfo</span><span class="token operator">:</span> name<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">selectDate</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> visitDate <span class="token operator">=</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">formatDate</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      visitDate<span class="token punctuation">,</span>
      <span class="token literal-property property">dateLayerVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">enhanced</span> <span class="token attr-name">show-scrollbar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-y</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>房屋信息<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{houseInfo || '请选择房屋信息'}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{houseInfo &amp;&amp; 'active-cell'}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">bind:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>openHouseLayer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">is-link</span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>访客信息<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span> <span class="token attr-name"><span class="token namespace">model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{name}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>姓名<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入访客真实姓名<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>性别<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>horizontal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{gender}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-radio</span> <span class="token attr-name">icon-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#5591AF<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{1}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>男<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-radio</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-radio</span> <span class="token attr-name">icon-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>36rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#5591AF<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{2}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>女<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-radio-group</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span> <span class="token attr-name"><span class="token namespace">model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{mobile}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>手机号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>number<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入访客联系电话号码<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200rpx<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>访问日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{visitDate &amp;&amp; 'active-cell'}}<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">bind:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>openDateLayer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">is-link</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{visitDate || '请选择访问日期'}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toolbar<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goPassport<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>enjoy-icon icon-confirm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>确认<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-popup</span> <span class="token attr-name"><span class="token namespace">bind:</span>close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>closeDateLayer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ dateLayerVisible }}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-datetime-picker</span> <span class="token attr-name"><span class="token namespace">bind:</span>confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectDate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ currentDate }}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">min-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ 1664582400000 }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-popup</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-action-sheet</span> <span class="token attr-name"><span class="token namespace">bind:</span>close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>closeHouseLayer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>closeHouseLayer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>select</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectHouse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span>
  <span class="token attr-name">show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ houseLayerVisible }}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">actions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ houseList }}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cancel-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>取消<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择报修房屋<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><h2 id="_09-访客邀请-表单信息收集-获取房屋列表"><a href="#_09-访客邀请-表单信息收集-获取房屋列表" class="header-anchor">#</a> 09.访客邀请—表单信息收集--获取房屋列表</h2> <h3 id="目标-8"><a href="#目标-8" class="header-anchor">#</a> 目标</h3> <p>能独立完成访客邀请表单信息收集功能</p> <h3 id="核心步骤-7"><a href="#核心步骤-7" class="header-anchor">#</a> 核心步骤</h3> <ol><li>发请求获取真实房屋列表</li> <li>给日期设置最大值</li></ol> <h3 id="参考代码-8"><a href="#参考代码-8" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">dateLayerVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">houseLayerVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">houseList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">houseId</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token literal-property property">houseInfo</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">currentDate</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token literal-property property">maxDate</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">3</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">3600</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span>
    <span class="token comment">// maxDate: new Date(2023, 10, 1).getTime(),</span>
    <span class="token literal-property property">visitDate</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getHouseList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 和报修页面类似 /house 接口没有数据， 用 /room代替</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/room'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'获取能报修的请求失败'</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> tmpArr <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">id</span><span class="token operator">:</span> item<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> item<span class="token punctuation">.</span>point <span class="token operator">+</span> item<span class="token punctuation">.</span>building <span class="token operator">+</span> <span class="token string">'号楼'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>room
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">houseList</span><span class="token operator">:</span> tmpArr
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-popup</span> <span class="token attr-name"><span class="token namespace">bind:</span>close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>closeDateLayer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ dateLayerVisible }}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-datetime-picker</span> 
    <span class="token attr-name"><span class="token namespace">bind:</span>confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectDate<span class="token punctuation">&quot;</span></span> 
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> 
    <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ currentDate }}<span class="token punctuation">&quot;</span></span> 
    <span class="token attr-name">min-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{currentDate}}<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">max-date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ maxDate }}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-popup</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-action-sheet</span> 
  <span class="token attr-name"><span class="token namespace">bind:</span>close</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>closeHouseLayer<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name"><span class="token namespace">bind:</span>cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>closeHouseLayer<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name"><span class="token namespace">bind:</span>select</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectHouse<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span>
  <span class="token attr-name">show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ houseLayerVisible }}<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">actions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ houseList }}<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">cancel-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>取消<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择报修房屋<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><h2 id="_10-访客邀请-校验表单信息"><a href="#_10-访客邀请-校验表单信息" class="header-anchor">#</a> 10.访客邀请—校验表单信息</h2> <h3 id="目标-9"><a href="#目标-9" class="header-anchor">#</a> 目标</h3> <p>能独立完成表单校验</p> <h3 id="参考代码-9"><a href="#参考代码-9" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">verifyHouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">const</span> valid <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>houseId
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写房屋信息'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">verifyName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 验证是否为2到5个汉字</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4e00-\u9fa5]{2,5}$</span><span class="token regex-delimiter">/</span></span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写真实中文姓名!'</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 宽松验证规则</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1[3-9][0-9]{9}</span><span class="token regex-delimiter">/</span></span>
  <span class="token comment">// 正则验证</span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token comment">// 验证未通过</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写正确的手机号'</span><span class="token punctuation">)</span>
  <span class="token comment">// 返回验证结果</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">verifyDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d{4}-\d{2}-\d{2}</span><span class="token regex-delimiter">/</span></span>
  <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>visitDate<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请选择预约日期'</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> valid
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="_11-访客邀请-提交表单"><a href="#_11-访客邀请-提交表单" class="header-anchor">#</a> 11.访客邀请—提交表单</h2> <h3 id="目标-10"><a href="#目标-10" class="header-anchor">#</a> 目标</h3> <p>能独立完成访客要求表单提交功能</p> <h3 id="核心步骤-8"><a href="#核心步骤-8" class="header-anchor">#</a> 核心步骤</h3> <ol><li>校验表单信息</li> <li>发送请求提交表单</li> <li>请求成功后跳转通行证页面</li></ol> <h3 id="参考代码-10"><a href="#参考代码-10" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyHouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/visitor'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">houseId</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>houseId<span class="token punctuation">,</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
      <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>gender<span class="token punctuation">,</span>
      <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">,</span>
      <span class="token literal-property property">visitDate</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>visitDate<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'新增访客邀请失败'</span><span class="token punctuation">)</span>
    wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/visitor_pkg/pages/passport/index?id='</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><h2 id="_12-访客列表-获取访客列表"><a href="#_12-访客列表-获取访客列表" class="header-anchor">#</a> 12.访客列表—获取访客列表</h2> <h3 id="目标-11"><a href="#目标-11" class="header-anchor">#</a> 目标</h3> <p>能独立完成获取访客功能</p> <h3 id="status"><a href="#status" class="header-anchor">#</a> status</h3> <ul><li>status为1表示生效中</li> <li>status为0表示已失效</li></ul> <h3 id="核心步骤-9"><a href="#核心步骤-9" class="header-anchor">#</a> 核心步骤</h3> <ol><li>访客列表页onLoad钩子里发请求获取列表数据</li> <li>完成数据渲染</li></ol> <h3 id="参考代码-11"><a href="#参考代码-11" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getVisitorList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getVisitorList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>
      code<span class="token punctuation">,</span>
      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">rows</span><span class="token operator">:</span> visitorList <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/visitor'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      visitorList<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>authorization</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{true}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">show-scrollbar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">enhanced</span> <span class="token attr-name">scroll-y</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visitor<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visitor-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我的访客<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>visitor-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{visitorList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goPassport<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>large<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.houseInfo}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag success<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.status === 1}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>生效中<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tag cancel<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.status === 0}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>已失效<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>访客姓名<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.name}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>手机号码<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.mobile}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>访问日期<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.visitDate}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blank<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    您还没有访客记录，请点击
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>navigator</span> <span class="token attr-name">hover-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>none<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/visitor_pkg/pages/form/index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>添加<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>navigator</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>authorization</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="_13-通行证-获取通行详情"><a href="#_13-通行证-获取通行详情" class="header-anchor">#</a> 13.通行证—获取通行详情</h2> <h3 id="目标-12"><a href="#目标-12" class="header-anchor">#</a> 目标</h3> <p>能独立完成通行详情获取功能</p> <h3 id="核心步骤-10"><a href="#核心步骤-10" class="header-anchor">#</a> 核心步骤</h3> <ol><li>列表项中绑定事件跳转到通行证页并传递id属性</li> <li>在通行证页面onLoad钩子中获取传递的id参数</li> <li>通过id参数查询通行详情</li></ol> <h3 id="参考代码-12"><a href="#参考代码-12" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">goPassport</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> status <span class="token punctuation">}</span> <span class="token operator">=</span> ev<span class="token punctuation">.</span>mark
  <span class="token keyword">if</span> <span class="token punctuation">(</span>status <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'已失效'</span><span class="token punctuation">)</span>
  wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/visitor_pkg/pages/passport/index?id='</span> <span class="token operator">+</span> id<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getVisitorDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getVisitorDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/visitor/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;passport&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;countdown&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>van<span class="token operator">-</span>count<span class="token operator">-</span>down wx<span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{validTime &gt; 0}}&quot;</span> time<span class="token operator">=</span><span class="token string">&quot;{{ validTime * 1000 }}&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view wx<span class="token operator">:</span><span class="token keyword">else</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;van-count-down&quot;</span><span class="token operator">&gt;</span><span class="token number">00</span><span class="token operator">:</span><span class="token number">00</span><span class="token operator">:</span><span class="token number">00</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;label&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>validTime <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'通行证有效时间'</span> <span class="token operator">:</span> <span class="token string">'已失效'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;qrcode&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>image src<span class="token operator">=</span><span class="token string">&quot;{{url}}&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>image<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view wx<span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{validTime == 0}}&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;mask&quot;</span><span class="token operator">&gt;</span>二维码失效<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;description&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;house&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>houseInfo<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;tips&quot;</span><span class="token operator">&gt;</span>将此二维码分享给访客，访客扫码即可开门<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;toolbar&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{validTime &gt; 0}}&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;button-share&quot;</span> open<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;share&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;enjoy-icon icon-share&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;text&quot;</span><span class="token operator">&gt;</span>分享给朋友<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;button-save&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;enjoy-icon icon-save&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;text&quot;</span><span class="token operator">&gt;</span>保存到本地<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
</code></pre></div><h2 id="_14-通行证-自定义分享"><a href="#_14-通行证-自定义分享" class="header-anchor">#</a> 14.通行证—自定义分享</h2> <h3 id="目标-13"><a href="#目标-13" class="header-anchor">#</a> 目标</h3> <p>能独立完成自定义分享功能</p> <h3 id="onshareappmessage"><a href="#onshareappmessage" class="header-anchor">#</a> <a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object" target="_blank" rel="noopener noreferrer">onShareAppMessage<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p>监听用户点击页面内转发按钮（<a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html" target="_blank" rel="noopener noreferrer">button<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 组件 open-type=&quot;share&quot;）或右上角菜单“转发”按钮的行为，并自定义转发内容。
:::success
<strong>注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮</strong>
:::</p> <h3 id="参考代码-13"><a href="#参考代码-13" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getVisitorDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getVisitorDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/visitor/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'查看通行证'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/visitor_pkg/pages/passport/index'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">imageUrl</span><span class="token operator">:</span> <span class="token string">'https://enjoy-plus.oss-cn-beijing.aliyuncs.com/images/share_poster.png'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_15-通行证-保存到本地api介绍"><a href="#_15-通行证-保存到本地api介绍" class="header-anchor">#</a> 15.通行证—保存到本地api介绍</h2> <h3 id="目标-14"><a href="#目标-14" class="header-anchor">#</a> 目标</h3> <p>掌握 wx.saveImageToPhotosAlbum &amp; wx.getImageInfo</p> <h3 id="saveimagetophotosalbum"><a href="#saveimagetophotosalbum" class="header-anchor">#</a> <a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html" target="_blank" rel="noopener noreferrer">saveImageToPhotosAlbum<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p>保存图片到系统相册。</p> <h3 id="getimageinfo"><a href="#getimageinfo" class="header-anchor">#</a> <a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html" target="_blank" rel="noopener noreferrer">getImageInfo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p>获取图片信息。网络图片需先配置 download 域名才能生效。</p> <h3 id="downloadfile"><a href="#downloadfile" class="header-anchor">#</a> <a href="https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html" target="_blank" rel="noopener noreferrer">downloadFile<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p>下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB</p> <h2 id="_16-通行证-保存到本地实现"><a href="#_16-通行证-保存到本地实现" class="header-anchor">#</a> 16.通行证—保存到本地实现</h2> <h3 id="目标-15"><a href="#目标-15" class="header-anchor">#</a> 目标</h3> <p>能独立完成图片保存到本地功能</p> <h3 id="核心步骤-11"><a href="#核心步骤-11" class="header-anchor">#</a> 核心步骤</h3> <ol><li>给按钮绑定事件，调用getImageInfo或downloadFile获取图片临时路径</li> <li>调用saveImageToPhotosAlbum传入临时路径完成保存功能</li></ol> <h3 id="参考代码-14"><a href="#参考代码-14" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">async</span> <span class="token function">saveToPhotosAlbum</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> path <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">getImageInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    wx<span class="token punctuation">.</span><span class="token function">saveImageToPhotosAlbum</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">filePath</span><span class="token operator">:</span> path<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 或者使用downloadFile</span>
    <span class="token comment">// wx.downloadFile({</span>
    <span class="token comment">//   url: this.data.url,</span>
    <span class="token comment">//   success: (res) =&gt; {</span>
    <span class="token comment">//     wx.saveImageToPhotosAlbum({</span>
    <span class="token comment">//       filePath: res.tempFilePath,</span>
    <span class="token comment">//     })</span>
    <span class="token comment">//   },</span>
    <span class="token comment">// })</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>:::success
注意：记得配置download的合法域名
:::</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/rz_doc_92/xcx/06.html" class="prev">
        day06-享+本地生活
      </a></span> <span class="next"><a href="/rz_doc_92/xcx/08.html">
        day08-uni-app项目
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/rz_doc_92/assets/js/app.c37b6607.js" defer></script><script src="/rz_doc_92/assets/js/3.fe9c6282.js" defer></script><script src="/rz_doc_92/assets/js/42.31ef2deb.js" defer></script>
  </body>
</html>
